<template>
	<view class="content">

		<view class="tabs">
			<view class="tab" v-for="(item,index) in navList" :key="item.id" :class="navCurrent==item.id?'active':''"
				@click="navChange(item.id)">
				{{item.tab}}
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navCurrent: 0,
				navList: [{
					tab: '全部',
					id: 0
				}, {
					tab: '合成石',
					id: 1
				}, {
					tab: '积分',
					id: 2
				}, {
					tab: '宝箱',
					id: 3
				}]
			};
		},
		methods: {
			navChange(id) {
				this.navCurrent = id
				this.$emit('success',id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		// background-color: #3b82f6;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.tab {
		border-radius: 9999px;
		white-space: nowrap;
		background-color: #374151;
		color: #d1d5db;
		padding: 10rpx 24rpx;
		font-weight: 500;
		--tw-text-opacity: 1;
	}

	.active {
		color: #fff;
		background-color: #3b82f6;
	}
</style>